<template>
    <div>
        <div class="x-content" v-for="(data,index) in listData" :key="index">
            <div class="x-content-left">
                <text class="x-content-font1">{{data.title}}</text>
                <text class="x-content-font2">{{data.reason}}</text>
                <text class="x-button">立即抢购</text>
            </div>
            <div class="x-content-right">
                <image class="x-image" :src="data.thumb"></image>
            </div>
        </div>
    </div>
</template>
<style scoped>
    .iconfont {
        font-family:iconfont;
    }
    .x-content {
        height: 210px;
        background-color: #fff;
        padding-left: 50px;
        padding-right:50px;
        padding-top:25px;
        padding-bottom:25px;
        border-bottom-color:#d7d5d1;
        border-bottom-width: 1px;
        flex-direction: row;
    }
    .x-content:active {
        background-color: #eee;
    }
    .x-content-font1 {
        color: #181619;
        font-size:30px;
        flex: 1;
        
    }
    .x-content-font2 {
        color: #545255;
        font-size:20px;
        top:-15px;
        flex: 1;
    }
    .x-content-left {
        flex: 1;
        flex-direction: column;
    }
    .x-content-right{
        width: 180px;
        height:160px;
        background-color: #eee;
    }
    .x-button {
        width: 140px;
        height:50px;
        border-color: #dbbc7c;
        border-width: 1px;
        color: #dbbc7c;
        text-align: center;
        line-height: 50px;
        font-size:28px;
        bottom: 0px;
    }
    .x-image {
        width: 180px;
        height:160px;
    }
</style>
<script>
    export default {
        props:["listData"],
        data () {
            return {
                
            }
        },
        methods: {
            onchange (event) {
                
            }
        }
    }
</script>